<template>
  <Modal
    v-model="show"
    title="排班信息"
    width="700"
    :mask-closable="false"
    @on-cancel="handleClose"
  >
    <div class="schedule-modal">
      <Spin v-if="loading" size="large" fix />
      <div v-else>
        <div class="schedule-filter">
          <DatePicker
            type="daterange"
            v-model="dateRange"
            placeholder="选择日期范围"
            style="width: 250px"
            @on-change="handleDateChange"
          />
        </div>
        <div class="schedule-table">
          <Table :columns="columns" :data="scheduleData" :loading="tableLoading">
            <template slot-scope="{ row }" slot="morningSlot">
              <span>{{ row.morningNumber ? `共${row.morningNumber}号` : '未排班' }}</span>
            </template>
            <template slot-scope="{ row }" slot="afternoonSlot">
              <span>{{ row.afternoonNumber ? `共${row.afternoonNumber}号` : '未排班' }}</span>
            </template>
          </Table>
        </div>
      </div>
    </div>
    <div slot="footer">
      <Button type="text" @click="handleClose">关闭</Button>
    </div>
  </Modal>
</template>

<script>
import { getDoctorSchedules } from '@/api/medical-dashboard'
import { formatDate } from '@/utils/date'

export default {
  name: 'ScheduleModal',
  props: {
    value: {
      type: Boolean,
      default: false
    },
    userId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      show: this.value,
      loading: false,
      tableLoading: false,
      dateRange: [],
      columns: [
        {
          title: '日期',
          key: 'date',
          width: 120
        },
        {
          title: '星期',
          key: 'weekday',
          width: 100
        },
        {
          title: '上午',
          slot: 'morningSlot',
          align: 'center'
        },
        {
          title: '下午',
          slot: 'afternoonSlot',
          align: 'center'
        }
      ],
      scheduleData: []
    }
  },
  watch: {
    value(val) {
      this.show = val
      if (val) {
        this.initDateRange()
        this.loadSchedules()
      }
    },
    show(val) {
      this.$emit('input', val)
    }
  },
  methods: {
    initDateRange() {
      const today = new Date()
      const endDate = new Date()
      endDate.setDate(today.getDate() + 14) // 默认显示未来两周
      this.dateRange = [today, endDate]
    },
    async loadSchedules() {
      if (!this.dateRange[0] || !this.dateRange[1]) return
      
      this.tableLoading = true
      try {
        const response = await getDoctorSchedules(this.userId, {
          startDate: formatDate(this.dateRange[0]),
          endDate: formatDate(this.dateRange[1])
        })
        
        if (response.success) {
          this.scheduleData = this.formatScheduleData(response.result)
        } else {
          this.$Message.error(response.message || '获取排班信息失败')
        }
      } catch (error) {
        this.$Message.error('获取排班信息失败：' + error.message)
      } finally {
        this.tableLoading = false
      }
    },
    formatScheduleData(schedules) {
      const weekdays = ['日', '一', '二', '三', '四', '五', '六']
      return schedules.map(schedule => {
        const date = new Date(schedule.date)
        return {
          date: formatDate(date),
          weekday: '星期' + weekdays[date.getDay()],
          morningNumber: schedule.morningNumber,
          afternoonNumber: schedule.afternoonNumber
        }
      })
    },
    handleDateChange() {
      this.loadSchedules()
    },
    handleClose() {
      this.show = false
      this.$emit('on-close')
    }
  },
  created() {
    if (this.show) {
      this.initDateRange()
      this.loadSchedules()
    }
  }
}
</script>

<style lang="less" scoped>
.schedule-modal {
  position: relative;
  min-height: 300px;
  
  .schedule-filter {
    margin-bottom: 20px;
  }
  
  .schedule-table {
    margin-top: 10px;
  }
}
</style> 